<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>花样连接</title>
    <style type="text/css">
        /*
            position属性
            static：默认值，没有定位！
            relative：相对定位！相对与自身原来的位置！也就是现在的位置，按照定位能还原到原本的位置！
                        设置相对定位的盒子，原本的位置会被留下来！
            absolute：绝对定位，相对于离当前元素最近的一个已经定位的父级元素为基准！
                        如果父级元素没有设置定位属性，则以浏览器为准！
                        元素的位置发生变化后，脱离了标准的文档流！它原来的位置不会保留！
            fixed：固定定位！相对于浏览器的！
            z-index：设置层叠！数值越大，离我们越近！对于没有设置position属性的元素无效！

        */
        div{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            padding: 10px;
        }
        a{
            display: block;
            height: 80px;
            width: 80px;
            background-color: pink;
            text-decoration: none;
            text-align: center;
            line-height: 80px;
        }
        #a2,#a4{
            position: relative;
            left: 180px;
            top: -80px;
        }
        #a5{
            position: relative;
            left: 90px;
            top: -240px;
        }
        a:hover{
            background: blue;
            text-decoration: underline;
            color: deeppink;
        }
    </style>
</head>
<body>
    <div id="box">
        <a href="#" id="a1">链接1</a>
        <a href="#" id="a2">链接2</a>
        <a href="#" id="a3">链接3</a>
        <a href="#" id="a4">链接4</a>
        <a href="#" id="a5">链接5</a>
    </div>
</body>
</html>